<template>
	<view class="body" >
		
		<view class="head-img" >
			<image :src="res_data.store_log" mode="aspectFill" ></image>
		</view>
		<view class="content" >
			<view class="content-flex" >
				<text class="left-tit" >店铺名称</text>
				<text>{{res_data.store_name}}</text>
			</view>
			<view class="content-flex" >
				<text class="left-tit" >商家姓名</text>
				<text>{{res_data.store_principal}}</text>
			</view>
			<view class="content-flex" >
				<text class="left-tit" >商家联系电话</text>
				<text>{{res_data.store_principal_phone}}</text>
			</view>
			<view class="content-flex" >
				<text class="left-tit" >商家地址</text>
				<text>{{res_data.address}}</text>
			</view>
		</view>
		
		<!-- 底部栏开始 -->
		<view class="bottom-view" >
			<view class="bottom-btn btn1"  @click="navToMap()">导航</view>
			<view class="bottom-btn btn2" @click="payAction" >付款</view>
		</view>
		<!-- 底部栏结束 -->
		
	</view>
</template>

<script>
	
	export default{
		data(){
			return{
				res_data:"",
			}
		},
		onLoad(option) {
			console.log();
			this.storeDetail(option.id);
		},
		methods:{
			storeDetail(id){
				this.$https.Classification.storeDetail(id).then(res=>{
					this.res_data = res;
				})
			},
			navToMap(){
				let that = this;
				uni.openLocation({
				    latitude: Number(that.res_data.lat),
				    longitude:  Number(that.res_data.long),
					name:that.res_data.store_name,
					address:that.res_data.address,
				    success: function () {
				        console.log('success');
				    },
					fail:function(res){
						console.log('res',res)
					}
				});
			},
			payAction(){
				uni.navigateTo({
					url: './goodsPay'
				})
			}
		}
	}
	
</script>

<style lang="scss" scoped >
	
	page,.body{
		width: 100%;
		height: 100%;
		
		background-color: rgb(250,250,250);
	}
	
	.head-img{
		width: 100%;
		height: 340rpx;
		image{
			width: 100%;
			height: 100%;
		}
	}
	
	.content{
		
		margin-top: 20rpx;
		padding: 20rpx 0;
		background-color: #FFFFFF;
		
		font-size: $uni-font-size-base;
		
		.content-flex{
			display: flex;
			align-items: center;
			justify-content: space-between;
			
			padding: 14rpx 20rpx;
			
		}
		
		.left-tit{
			min-width: 200upx;
			color: #666;
			margin-right: 30upx;
		}
		
	}
	
	.bottom-view{
		
		position: fixed;
		bottom: 0;
		
		display: flex;
		align-items: center;
		
		
		height: 80rpx;
		line-height: 80rpx;
		width: 100%;
		
		text-align: center;
		
		.bottom-btn{
			
			width: 50%;
			height: 100%;
			
			font-size: $uni-font-size-base;
			
		}
		
		.btn1{
			color: #000;
			background-color: #fff;
			
			border: 1rpx solid rgb(250,250,250);
		}
		
		.btn2{
			color: #fff;
			background-color: $uni-color-error;
		}
		
	}
	
</style>
